<template>
  <div class="">
    <el-tabs v-model="activeTall" class="self-tab-style no-bar">
      <el-tab-pane label="推荐" name="推荐">
        <div class="">
          <el-row v-for="(data, index) in datas" @click="goTopic(data)" :key="index">
            <el-col :span="24" >
              <div class="topic-item" style="margin-top: 10px;" @click="goTopic(data)">
                <p class="topic-title" style="font-size: 16px;">{{data.basicTitle}}</p>
                <div class="list-footer-fs">
                  <p class="topic-desc">{{data.basicDescription}}</p>
                  <span>{{$formatDateTime(data.ctime)}}</span>
                  <span class="fr">{{data.browseNumber}}</span>
                  <span class="el-icon-view fr" style="padding-top: 3px;margin-right: 6px;"></span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "recommend-topic",
  title: "推荐话题",
  data () {
    return {
      activeTall: '推荐',
      datas: []
    }
  },
  mounted () {
    this.getRecTopics()
  },
  methods: {
    getRecTopics () {
      let params = {
        offset: 0,
        limit: 4,
        type: '',
        search: ''
      }
      axios.post('/mscs/topic/findTopicBasicByType', this.$paramsConvert(params)).then((res) => {
        this.datas = res.data.data
      }).catch((error) => {
        this.$catchError(error)
      }).finally(() => {
        this.loading = false
      })
    },
    goTopic (data) {
      const {href} = this.$router.resolve({
        name: 'topicdetails',
        query: data
      })
      window.open(href, '_blank')
    }
  }
}
</script>

<style>
  #tab-推荐 {
    font-size: 18px;
  }
  .topic-item .topic-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 3px;
    cursor: pointer;
  }
  .topic-item .topic-title:hover {
    color: #94C05A;
  }
  .topic-item .topic-desc {
    cursor: pointer;
    font-size: 15px;
    color: #333333;
    font-weight: normal;
    margin: 0;
    overflow: hidden;
    line-height: 1.6;
    word-break: break-all;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 4; /** 显示的行数 **/
  }
  .topic-item .topic-content {
    font-size: 16px;
    color: #333333;
  }
  .topic-item .topic-desc:hover {
    color: #666666;
  }

</style>
